<template>
  <z-paging ref="paging" v-model="collectData" @query="queryList" :fixed="false" height="100%" use-page-scroll>
    <u-swipe-action :show="item.show" :index="index" v-for="(item, index) in collectData" :key="item.id" @click="handleCollect" :options="options" btn-width="120">
      <news-card :item="item" :newsId="item.article_id"></news-card>
    </u-swipe-action>
  </z-paging>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          text: '取消收藏',
          style: {
            color: '#FFFFFF',
            backgroundColor: '#FF2C3C'
          }
        }
      ],
      collectData: []
    };
  },
  methods: {
    async queryList(page_no, page_size) {
      console.log('queryList', page_no, page_size);
      try {
        const { lists } = await uni.$u.api.getCollect();
        lists.forEach((item) => {
          item.show = false;
        });
        this.collectData = lists;
        this.$refs.paging.complete(lists);
      } catch (e) {
        console.log('报错=>', e);
        //TODO handle the exception
        this.$refs.paging.complete(false);
      }
    },
    async handleCollect(index) {
      try {
        const article_id = collectData[index].article_id;
        await uni.$u.api.cancelCollect({ id: article_id });
        uni.$u.toast('已取消收藏');
        this.$refs.paging.reload();
      } catch (err) {
        //TODO handle the exception
        console.log('取消收藏报错=>', err);
      }
    }
  }
};
</script>

<style scoped></style>
